<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				实名认证
			</view>
			<view class="BGC">
				<view class="List_entrance">
					<view class="List_item" v-for="(item,index) in InputList" :key='index'
						:class=" index != 9 ? 'Bottom_boder' : ''"  v-show="index != 1 && index != 0">
						<view style="width: 200rpx;">
							{{item.title}}
						</view>
						<view class="input"
							v-if="index != 8 && index != 4 && index!= 5 && index != 6 && index != 1 && index != 7 && index !=3 && index !=9">
							<input type="text" v-model="item.value" v-if="index != 0" @keyup="item.value=item.value.replace(/[^\u4e00-\u9fa5]/g,'')" :placeholder="item.placeholder" />
							<input type="text" v-model="item.value" v-else disabled :placeholder="item.placeholder" />
						</view>
						<view class="inputYzm" v-if="index == 1	">
							<input type="number" maxlength="6" v-model="item.value" @blur="Submit()"
								:placeholder="item.placeholder" />
							<view class="yzm" @click="getCode(index)" v-if="popupshow1">获取</view>
							<view class="yzm" v-else>{{count1}}秒后可重试</view>
						</view>

						
						
						<view class="inputYzm" v-if="index == 4" style="justify-content: space-between;">
							<!-- <Input type="date" id="input_date" v-model="item.value" style="border: none;"
								@change='date()'></Input> --> 
								<view class="">
									<uni-datetime-picker
									type="date"
									:value="item.value"
									returnType="string"
									start="2022-09-15"
									:border='false'
									:clear-icon='false'
									@change='date'
									/>
								</view>
								<view v-if="!item.id_exp" @click="long_term">
									长期
								</view>
						</view>
						
						<view class="input" v-if="index == 3">
							<input type="text"  v-model="item.value"
								:placeholder="item.placeholder" @keyup="item.value=item.value.replace(/[^\d\x\X]/g,'')" />
						</view>
						
						<view class="input" v-if="index == 5">
							<input type="number"  v-model="item.value" @blur="check(item.value)"
								:placeholder="item.placeholder" />
						</view>
						<view class="input" v-if="index == 6">
							<input type="text" v-model="item.value" disabled :placeholder="item.placeholder" />
						</view>
						<view class="inputYzm" v-if="index == 7">
							<input type="number" maxlength="11" v-model="item.value" :placeholder="item.placeholder" />
						</view>
						<view class="inputYzm" v-if="index == 8">
							<input type="number" maxlength="6" v-model="item.value" :placeholder="item.placeholder" />
							<view class="yzm" @click="getCode(index)" v-if="popupshow">获取</view>
							<view class="yzm" v-else>{{count}}秒后可重试</view>
						</view>
						<view class="c-password-input-box" v-if="index == 9">
							<view>
								<PwdControl style='' />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="upPhoto">
				<view class="text">
					上传身份证照片
				</view>
				<view class="Photo">
						<upimage v-if="!message" @result='imgResult' :currenttype="currenttype"></upimage>
						<image v-else :src="message" mode=""></image>
						<view v-if="message" class="icon" @click="Delete(1)">
							<image src="../../../static/images/user/img_cancel.png" mode=""></image>
						</view>
				</view>
				<view class="Photo">
					<upimage v-if="!message1" @result='imgResult1' :currenttype="currenttype1"></upimage>
					<image v-else :src="message1" mode=""></image>
					<view v-if="message1" class="icon" @click="Delete(2)" >
						<image src="../../../static/images/user/img_cancel.png" mode=""></image>
					</view>
				</view>
				<view class="choice">
					<view class="icon"  @click="isChoice = !isChoice">
						<image v-if="!isChoice" src="@/static/images/user/choice.png" mode=""></image>
						<image v-else src="@/static/images/user/choice1.png" mode=""></image>
					</view>
					<view class="text">
						已阅读并同意<text class="dark" @click="showRegisterAgreement('privacy_agreement', privacy_agreement_title)">《用户隐私协议》</text>
					</view>
				</view>
			</view>
			<view class="Submit" v-if="!isBTN" >
				认证信息
			</view>
			<view class="Submit" v-else style="background-color: #3A81F6;" @tap.stop.prevent='userOpenAcctVerify'>
				认证信息
			</view>
			<uni-popup style="background-color: #fff;" ref="popup" :is-mask-click='false' type='center' width="40%" :show-title="false" :show-confirm-button="false">
				<view class="sk-wave-warp">
					<view class='sk-wave'>
					    <view class='sk-rect sk-rect-1'></view>
					    <view class='sk-rect sk-rect-2'></view>
					    <view class='sk-rect sk-rect-3'></view>
					    <view class='sk-rect sk-rect-4'></view>
					    <view class='sk-rect sk-rect-5'></view>
					</view>
					<view class="text_msg"
					      style="padding: 10rpx 20rpx 40rpx 20rpx;text-align: center;font-size:26rpx;line-height:40rpx;">
					    图片上传中...
					</view>
				</view>
			</uni-popup>
			
			
			
			<!-- <model v-if="showModel" confirm-text = "取消" cancle-text="取消" ></model> -->
			<uni-popup ref="popupa" type="center"  :is-mask-click="false">
				<view class="popup-list">
					<view class="popup-list-title">
						确定是您本人操作，请先进行身份确认
					</view>
					<view class="popup-input">
						<view class="popup-input-text">
							验证码:
						</view>
						<view class="inputYzm " >
							<input type="number" maxlength="6" v-model="InputList[1].value"  placeholder="请输入验证码" />
							<view class="yzm" @click="getCode(1)" v-if="popupshow1">获取</view>
							<view class="yzm" v-else>{{count1}}秒后可重试</view>
						</view>
					</view>
					<view class="footer-pup">
						<view class="footer-pup-ok" @tap.stop.prevent="chose">
							取消
						</view>
						<view class="footer-pup-cancal" @tap.stop.prevent="Submit">
							确定
						</view>
					</view>
					
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		isPhone
	} from "@/utils/verify.js"
	import upimage from '@/components/upload/upImage.vue'
	import PwdControl from '@/components/PwdControl/index.vue'
	export default {
		data() {
			return {
				showModel:false,
				InputList: [
					{
						title: '手机号码',
						value: '',
						placeholder: '请输入手机号码'
					},
					{
						title: '短信验证码',
						value: '',
						placeholder: '请输入验证码'
					},
					{
						title: '真实姓名',
						value: '',
						placeholder: '请输入真实姓名'
					},
					{
						title: '身份证号',
						value: '',
						placeholder: '请输入身份证号'
					},
					{
						title: '有效期',
						value: '',
						placeholder: '请选择身份证有效期',
					},
					{
						title: '银行卡',
						value: '',
						placeholder: '请输入银行卡号'
					},
					{
						title: '银行卡类型',
						value: '',
						placeholder: '请输入银行卡类型'
					},
					{
						title: '预留手机号',
						value: '',
						placeholder: '填写预留手机号'
					},
					{
						title: '短信验证码',
						value: '',
						placeholder: '请输入验证码'
					},
					{
						title: '支付密码',
						value: '',
						placeholder: '请设置一串6位数的数字密码'
					}
				],

				isChoice: false, //勾选协议
				popupshow: true, //
				popupshow1: true,
				count: 0, //第一次倒计时
				count1: 0, //第二次倒计时
				timer: false, //倒计时开关
				timer1: false, //倒计时开关
				password: '', //加密密码
				message: null, //正面照
				message1: null, //国徽
				token: '',
				id_portrait: '', //人面照id
				id_emblem: '', //国徽面id
				txn_seqno: '', //第二次验证码返回
				LLtoken: '', //第二次验证码返回的连连token
				isBTN:false,//按钮
				isLoadding:false,
				currenttype: '1',
				currenttype1: '2',
				privacy_agreement_title: '隐私政策',
				id_exp:'99991231',//身份证有效期
				jyPhone:false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.token = uni.getStorageSync('token')
			this.$nextTick(() => {
				window.pwdcontrol = undefined
				window.getRandom()
			})
		},
		onShow(){
			
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		mounted() {
						this.$refs.popupa.open()
			let res = uni.getStorageSync('userInfo')
			console.log(res,'res')
			this.InputList[2].value = res.address_default.name;
			this.InputList[3].value = res.address_default.ID_number
			this.InputList[0].value = res.phone
			// this.$nextTick(() => {
			// 	this.getRandom()
			// })
		},
		methods: {
			long_term(){
				this.InputList[4].value = '9999-12-31'
				console.log(this.InputList[4].value)
			},
			// 取消按钮 返回上一页
			chose(){
				uni.redirectTo({
					url: `../index`
				});
			},
			// 成功
			cancal(){
				this.Submit()
				// if(this.jyPhone){
				// 	this.$refs.popupa.close()
				// }
			},
			Delete(e){
				if(e == 1){
					this.message = ''
				}else{
					this.message1 = ''
				}
			},
			date(e) {
				// let aa =  e.split('-').join("")
				// console.log(aa,'aaaaaa')
				this.InputList[4].value = e
				console.log(this.InputList[4].value)
			},
			showRegisterAgreement(type, title) {
				console.log(1)
			    uni.navigateTo({
			     url:`../../login/agreement?type=${type}&title=${title}`
			    })
			   },
			//img上传
			imgResult(e) {
				console.log(e)
				// this.message = e
				// this.currenttype.url = e
				this.llUpload(e, 1)
			},
			//img上传
			imgResult1(e) {
				console.log(e)
				// this.message = e
				// this.currenttype.url = e
				this.llUpload(e, 2)
			},
			//点击认证
			determine() {
				if (this.InputList[8].value == '' || this.InputList[8].value == null) {
					app.showToast('请输入银行预留手机号验证码');
					this.isChoice = false
				} else if (this.password == '' || this.password == null) {
					console.log(this.password)
					this.isChoice = false
					app.showToast('请输入交易密码');
				} else {
					this.isBTN = true
				}

			},
			//第一次验证码失去焦点调用
			Submit() {
				// console.log(this.InputList)
				this.getbinRegLLPhoneVerify()
			},
			//校验手机号
			Phone() {
				if (!isPhone(this.InputList[7].value)) {
					app.showToast('手机号格式不正确');
					return false
				}
				return true
			},
			//输入银行卡号
			check(e) {
				console.log(this.InputList)
				console.log(e)
				let _this = this
				app._post_form('User/getBankCardBin', {
					card_on: e
				}, function(result) {
					if (1 == result.code) {
						_this.InputList[6].value = result.data.bankName
					}
				}, null, function() {
					// 解除按钮禁用
					// _this.disabled = false;
				});
			},

			//获取验证码倒计时
			getCode(e) {
				console.log(e)
				if (e == 8) {
					this.id_exp = this.InputList[4].value.replace('-', '')
					this.id_exp = this.id_exp.replace('-', '')
					console.log(this.InputList[4].value)
					console.log(this.id_exp)
					if (this.InputList[2].value == '' || this.InputList[2].value == null) {
						app.showToast('请输入真实姓名');
					} else if (this.InputList[3].value == '' || this.InputList[3].value == null) {
						app.showToast('请输入身份证号');
					} else if (this.id_exp == '' || this.id_exp == null) {
						app.showToast('请选择身份证到期时间');
					} else if (this.InputList[5].value == '' || this.InputList[6].value == null) {
						app.showToast('请输入银行卡号');
					} else if (this.InputList[7].value == '' || this.InputList[7].value == null) {
						app.showToast('请输入手机号码');
					} else if (this.isPhone == false) {
						app.showToast('手机号格式不正确');
					} else if (this.message == '' || this.message == null) {
						app.showToast('请上传身份证人面照');
					} else if (this.message1 == '' || this.message1 == null) {
						app.showToast('请上传身份证国徽面照');
					} else {
						
						if (!this.timer) {
							this.userOpenAcct()
							
						}
					}
				} else {
					// const TIME_COUNT = 60;
					if (!this.timer1) {
						this.getLianLianCode()
						// this.count1 = TIME_COUNT;
						// this.popupshow1 = false;
						// this.timer1 = setInterval(() => {
						// 	if (this.count1 > 0 && this.count1 <= TIME_COUNT) {
						// 		this.count1--;
						// 	} else {
						// 		this.popupshow1 = true;
						// 		clearInterval(this.timer);
						// 		this.timer1 = null;
						// 	}
						// }, 1000)
					}
				}
			},
			//第一次次发送验证码
			getLianLianCode() {
				let _this = this
				app._post_form('Address/getLianLianCode', {}, function(result) {
					if (1 == result.code) {
						app.showToast('验证码已发送');
						const TIME_COUNT = 60;
						_this.count1 = TIME_COUNT;
						_this.popupshow1 = false;
						_this.timer1 = setInterval(() => {
							if (_this.count1 > 0 && _this.count1 <= TIME_COUNT) {
								_this.count1--;
							} else {
								_this.popupshow1 = true;
								clearInterval(_this.timer1);
								_this.timer1 = null;
							}
						}, 1000)
					}
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},
			//校验第一次验证码
			getbinRegLLPhoneVerify() {
				let _this = this
				app._post_form('Address/binRegLLPhoneVerify', {
					token: _this.token,
					bin_verify_code: _this.InputList[1].value
				}, function(result) {
					// console.log(result,'result')
					if (1 == result.code) {
						_this.$refs.popupa.close()
						// this.jyPhone = true
						app.showToast('校验成功');
					}
				}, null, function() {
					_this.InputList[1].value = null
					app.showError(result.msg);
				});

			},
			//连连上传文件
			llUpload(e, i) {
				let _this = this
				this.$refs.popup.open()
				app._post_form('Upload/llUpload', {
					token: _this.token,
					file_context: e
				}, function(result) {
					if (1 == result.code) {
						if (result.data.code == 1) {
							_this.$refs.popup.close()
							if (i == 1) {
								_this.message = e
								_this.id_portrait = result.data.data.doc_id
							} else {
								_this.message1 = e
								_this.id_emblem = result.data.data.doc_id
							}
						} else {
							_this.$refs.popup.close()
							app.showError('照片上传失败');
						}
					}
				}, null, function() {
					_this.$refs.popup.close()
				});
			},
			//申请开户---第二次发送验证码
			userOpenAcct() {
				let _this = this
				app._post_form('user/userOpenAcct', {
					token: _this.token,
					user_name: _this.InputList[2].value,
					id_no: _this.InputList[3].value,
					id_exp: _this.id_exp,
					linked_acctno: _this.InputList[5].value,
					linked_phone: _this.InputList[7].value,
					id_emblem: _this.id_emblem,
					id_portrait: _this.id_portrait
				}, function(result) {
					if (1 == result.code) {
							app.showToast('验证码发送成功');
							_this.txn_seqno = result.data.txn_seqno
							_this.LLtoken = result.data.token
							const TIME_COUNT = 60;
							_this.count = TIME_COUNT;
							_this.popupshow = false;
							_this.timer = setInterval(() => {
								if (_this.count > 0 && _this.count <= TIME_COUNT) {
									_this.count--;
								} else {
									_this.popupshow = true;
									clearInterval(_this.timer);
									_this.timer = null;
								}
							}, 1000)
					}
				}, null, function() {
					app.showError(result.msg.msg);
				});
			},
			//提交开户实名
			userOpenAcctVerify() {
				let _this = this
				app._post_form('user/userOpenAcctVerify', {
					token: _this.token,
					txn_seqno: _this.txn_seqno,
					ll_token: _this.LLtoken,
					verify_code: _this.InputList[8].value,
					password: _this.password,
					random_key: window.random.random_key
				}, function(result) {
					if (1 == result.code) {
						app.showToast('实名成功');
						setTimeout(() => {
							uni.redirectTo({
								url: `../index`
							});
						}, 1500)

					}
				}, null, function() {
					app.showError(result.msg);
				});

			},
		},
		watch:{
			isChoice(val, oldVal){
				if(val){
					setTimeout(()=>{
						console.log(window.pwdcontrol)
						this.password = window.pwdcontrol
						this.determine()
					},500)
				}else{
					this.isBTN = false
				}
			}
		},
		components: {
		    upimage,
			PwdControl
		},
	}
</script>

<style lang="scss" scoped>
	.footer-pup{
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #e0e0e0;
		padding-top: 10rpx;
		.footer-pup-ok{
			width: 50%;
			text-align: center;
		}
		.footer-pup-cancal{
			width: 50%;
			text-align: center;
			border-left: 1rpx solid #e0e0e0;
		}
	}
	.popup-list{
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 620rpx;
		height: 350rpx;
		padding: 20rpx;
		background-color: #fff ;
		position: relative;
		z-index: 999;
		overflow: hidden;
		border-radius: 20rpx;
		// font-weight: 500;
	}
	.popup-input-text{
		margin-right: 20rpx;
	}
	.popup-input{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx 0;
	}
	.inputYzm {
		width: 430rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
	
		// justify-content: space-between;
		input {
			width: 280rpx;
		}
	
		.yzm {
			font-size: 24rpx
		}
	}
	.container {
		background-color: #EEF2F7;
		// height: 100vh;
		padding-bottom: 50rpx;
	}

	.Bottom_boder {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-family: 'dy-iconfont';
		font-weight: bold;
		line-height: 80rpx;
	}

	.BGC {
		background-color: #FAFAFA;
		padding-top: 50rpx;
		padding-bottom: 50rpx;

		.List_entrance {
			margin: 0 30rpx;

			border-radius: 20rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
			padding: 0 30rpx;

			.List_item {
				height: 100rpx;
				background-color: #FFF;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				input{
					font-size: 28rpx;
				}
				.input {
					input{
						width: 400rpx;
						
					}
					
				}

				.inputYzm {
					width: 430rpx;
					height: 48rpx;
					display: flex;
					align-items: center;

					// justify-content: space-between;
					input {
						width: 280rpx;
					}

					.yzm {
						font-size: 24rpx
					}
				}
			}
		}
	}

	.upPhoto {
		padding: 40rpx;

		.text {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			.dark{
				margin-left: 10rpx;
				color: #000;
				font-size: 28rpx;
			}
		}

		.Photo {
			margin: 30rpx auto;
			padding: 30rpx 0;
			// margin-top: 30rpx;
			width: 546rpx;
			height: 344rpx;
			border-radius: 20rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				object-fit: cover !important;
			}
			.icon{
				position: absolute;
				top: 40rpx;
				right: 10rpx;
				width: 50rpx;
				height: 50rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}

			Input {}
		}

		.choice {
			margin-top: 30rpx;
			display: flex;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.6);
			}
		}
	}

	.Submit {
		width: 92%;
		margin: 40rpx 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #BBD3FB;
		color: #FFF;
		border-radius: 10rpx;
	}
	.sk-wave-warp{
		padding: 10rpx;
		width: 300rpx;
		background-color: #FAFAFA !important;
	}
	// /deep/ .uni-popup__wrapper{
	// 	width: 300rpx;
	// 	background-color: #FAFAFA !important;
	// }
</style>
